<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            background-color: #ccc;

        }

        .bd {
            border: 1px solid #f00;
        }

        .fz30 {
            font-size: 30px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>{{ title }}</h2>
    <p>
        v-on 指令是用于做事件绑定
        : 后面就是我们的 事件的类型，不需要加 on 前缀，例如 click change keyup keydown blur
    </p>
    <p>
        clickHandler 就是我们的事件的回调函数，需要在 实例化 vue 的时候，在methods里面定义
    </p>


    <div>
        输入：<input type="text" @keyup="keyupHandler">
    </div>


</div>

</body>
<script src="lib/vue/vue.js"></script>

<script type="text/javascript">


    const vm = new Vue({
        el: '#app',
        data: {
            // 普通的字符串
            title: 'vuejs 之 v-model 的使用',
            kw: '', // data 里面的 kw 用于接收表单的数据信息
            gender: 0, // gender 用于收集表单单选框的值 0代表保密 1男 2女
            hobby: ['ymq'],

        },
        methods: {
            clickHandler(msg = '') {
                alert(msg);
                // console.log('clickHandler');
            },
            keyupHandler(e) {
                console.log('keyup', e.target.value);
            }
        }
    })

</script>

</html>
